<template>
  <div id="nav">
    <div class="all" v-for="(item, index) in all.list" :key="index" @click="giftBoxDetails(item)">
      <div class="one">
        <img :src="item.image" alt="" />
      </div>
      <div class="two">
        <div style="overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;">{{ item.title }}</div>
        <div style="overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;">{{ item.details }}</div>
        <div @click="giftBoxDetails(item)">购买</div>
        <!-- 点击函数传参跳转 -->
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive } from 'vue' // 导入reactive函数用于创建响应式对象
import { useRouter } from 'vue-router' // 导入useRouter函数用于进行页面跳转
import { baseURL, homeGiftList } from '../api' // 导入api中的接口函数和常量
import { useIntegrallist } from '@/stores/integralList.js' // 导入名为useIntegrallist的自定义钩子函数
const integrallist = useIntegrallist() // 调用useIntegrallist钩子函数创建名为integrallist的积分列表Store对象

const router = useRouter() // 调用useRouter函数创建名为router的路由对象

function giftBoxDetails(item) { // 定义名为giftBoxDetails的函数，接收一个参数item
  integrallist.getCurGift(item) // 调用integrallist的getCurGift方法，将item传递给该方法
  router.push('/GiftBoxDetails') // 通过router进行页面跳转，跳转至'/GiftBoxDetails'路径
}

const all = reactive({ // 创建名为all的响应式对象
  loading: true, // loading属性初始值为true
  tabs: [{ name: `所有商品` }], // tabs属性初始值为一个包含单个对象{name: `所有商品`}的数组
  list: [] // list属性初始值为空数组
})

;(async function () { // 立即执行函数
  try {
    all.loading = true // 将all的loading属性设置为true
    const res = await homeGiftList() // 调用homeGiftList接口函数，并使用await等待接口返回结果
    all.list = res.map((item) => { // 使用map方法遍历res数组的每个元素，并为每个元素设置image属性为baseURL + item.image
      item.image = baseURL + item.image
      return item
    })
    all.loading = false // 将all的loading属性设置为false
  } catch (error) {
    all.loading = false // 如果发生错误，将all的loading属性设置为false
  }
})()

</script>

<style lang="less" scoped>
@var1: #f5f6f8;
@var2: #ababab;
@var3: #ffc456;

img {
	width: 90px;
	height: 90px;
}
#nav {
	background-color: @var1;
	height: 95vh;
	padding-top: 2vh;
}
.all {
	display: flex;
	width: 96%;
	margin-left: 2%;
	background-color: white;
	border-radius: 10px;
	padding: 1.5vh 4vw;
	margin-bottom: 2vh;
}
.one {
	margin-right: 4vw;
}
.two > div:first-child {
	font-weight: 900;
	font-size: 17px;
}
.two > div:nth-child(2) {
	font-size: 13px;
	margin-top: 3%;
	color: @var2;
}
.two > div:last-child {
	background-color: @var3;
	color: white;
	width: 58px;
	padding: 0.5vh 0;
	padding-top: 0.3vh;
	border-radius: 15px;
	text-align: center;
	font-size: 14px;
	margin-top: 6%;
}

</style>
